<template>
  <div>
    <div class="PortalSitesMap_layerSwitch__dolBg" v-if="isShowType">
      <div>
        选择底图
        <span
          role="img"
          aria-label="close"
          tabindex="-1"
          class="anticon anticon-close"
        ></span>
      </div>
      <div
        class="ant-divider css-1wismvm ant-divider-horizontal"
        role="separator"
      ></div>
      <div class="PortalSitesMap_layer__HgOPW">
        <div
          v-for="(item, index) in mapList"
          :key="index"
          class="PortalSitesMap_layerItem__bIseP"
          @click="changeMapTemplate(item)"
        >
          <span>
            <img
              :src="item.icon"
              :class="item.id === actived ? 'activeClass' : ''"
            />
          </span>
          <p>{{ item.name }}</p>
        </div>
      </div>
      <div>
        地名
        <label
          class="ant-checkbox-wrapper ant-checkbox-wrapper-checked css-1wismvm"
        >
          <span class="ant-checkbox css-1wismvm ant-checkbox-checked">
            <!-- :disabled="actived==='00000001'" -->
            <input
              type="checkbox"
              class="ant-checkbox-input"
              v-model="isTerrName"
              v-on:change="changeTerrName()"
            />
            <span class="ant-checkbox-inner"></span>
          </span>
        </label>
      </div>
    </div>
    <div class="BtnBox">
      <!-- <Button
                type="primary"
                shape="circle"
                :title="$t('i18n.dataOptimization_HideSearch')"

                size="small"
                style="margin-right: 5px"
              >
                <i class="fa fa-arrows-alt"></i>
              </Button> -->
      <!-- <Button
                type="primary"
                shape="circle"
                :title="$t('i18n.dataOptimization_RollerShutter')"
                @click="openDeaeg"
                size="small"
                style="margin-right: 5px"
              >
                <i class="fa fa-minus-square-o"></i>
              </Button>
              <Button
                type="primary"
                shape="circle"
                :title="$t('i18n.dataOptimization_CloseRollerShutter')"
                @click="closeDeaeg"
                size="small"
                style="margin-right: 5px"
              >
                <i class="fa fa-close"></i>
              </Button>
              <Button
                type="primary"
                shape="circle"
                :title="$t('i18n.dataOptimization_LoadMap')"
                @click="drawectangleMap"
                size="small"
                style="margin-right: 5px"
              >
                <Icon type="ios-qr-scanner" />
              </Button> -->
      <!-- <Button title="图层管理" >

      </Button> -->
      <el-tooltip content="图层管理" placement="top">
        <img
          :src="isShowType ? layers_s : layers"
          style="width: 60px; height: 60px"
          alt=""
          @click="changeLayer"
        />
      </el-tooltip>
      <!-- <div style="margin-left: 5px">
                <Button
                  type="primary"
                  shape="circle"
                  icon="md-arrow-dropdown"
                  @click="showTBL = !showTBL"
                  size="small"
                ></Button>
                <CellGroup v-show="showTBL">
                  <RadioGroup v-model="numTBL">
                    <Radio label="1">探针</Radio>
                    <Radio label="2">波段</Radio>
                    <Radio label="3">拉伸</Radio>
                  </RadioGroup>
                  <div v-show="numTBL === '1'">
                    <div
                      class="dataTanZhen"
                      v-for="item in dataTanZhen"
                      :key="item.image"
                    >
                      <div
                        style="
                          word-wrap: break-word;
                          word-break: normal;
                          padding: 5px 0;
                        "
                      >
                        {{ item.image }}
                      </div>
                      <div
                        v-for="val in item.values"
                        :key="val.value"
                        style="display: flex; justify-content: space-between"
                      >
                        <div>{{ val.name }}</div>
                        <div>{{ val.value }}</div>
                      </div>
                    </div>
                  </div>
                  <div v-show="numTBL === '2'">
                    <div
                      class="dataTanZhen"
                      v-for="item in getBoDuan"
                      :key="item.name + item.min + item.max"
                    >
                      <div
                        style="display: flex; justify-content: space-between"
                      >
                        <div>{{ item.name }}</div>
                        <div>
                          {{ item.min }}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;{{
                            item.max
                          }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-show="numTBL === '3'">
                    <div class="dataTanZhen">
                      <RadioGroup v-model="lashen" vertical>
                        <Radio label="99%线性拉伸"></Radio>
                        <Radio label="98%线性拉伸"></Radio>
                        <Radio label="95%线性拉伸"></Radio>
                        <Radio label="标准差"></Radio>
                        <Radio label="直方图"></Radio>
                      </RadioGroup>
                    </div>
                  </div>
                </CellGroup>
              </div> -->
    </div>
  </div>
</template>

<script>
import layers_s from '@/assets/resource/layers_s.jpg'
import layers from '@/assets/resource/layers.jpg'
export default {
  name: '',
  components: {},
  props: {
    mapList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      //引入图标
      layers_s,
      layers,
      actived: '00000001',
      isTerrName: true, //控制是否显示地名
      isShowType: false, //控制是否显示切换地图模板
      layerCaId: '', //保存选择的地图模板与之对应的注记图层ID
      paramsObj: {
        isTerrName: '', //控制是否显示地名
        layerId: '', //图层ID
        layerCaId: '', //注记图层id
        // isShowType: "", //控制是否显示切换地图模板
      },
    }
  },
  mounted() {
    //展示切换地图模板时默认显示地形模板和地形注记
    this.paramsObj.layerId = 'tdt_terr'
    this.paramsObj.layerCaId = 'tdt_ctatest'
  },
  methods: {
    //展示地图切换组件
    changeLayer() {
      this.isShowType = !this.isShowType
      // this.paramsObj.isShowType =this.isShowType;
      // this.$emit('changeLayer',this.paramsObj)
    },
    //点击切换地图显示
    changeMapTemplate(params) {
      // this.isTerrName = !this.isTerrName
      this.actived = params.id
      this.paramsObj.isTerrName = this.isTerrName
      this.paramsObj.layerId = params.layerId
      if (this.paramsObj.layerId == 'tdt_terr') {
        this.paramsObj.layerCaId = 'tdt_ctatest' //保存地形注记ID
        //当前地图模板是影像
      } else if (this.paramsObj.layerId == 'tdt_satellite') {
        this.paramsObj.layerCaId = 'tdt_ciatest' //保存影像注记ID
      } else {
        this.paramsObj.layerCaId = 'tdt_cvatest' //保存矢量注记ID
      }

      this.$emit('changeMapTemplate', this.paramsObj)
    },
    //切换是否显示地名图标
    changeTerrName() {
      console.log('this.isTerrName', this.isTerrName)
      //当前地图模板是地形渲染
      if (this.paramsObj.layerId == 'tdt_terr') {
        this.paramsObj.layerCaId = 'tdt_ctatest' //保存地形注记ID
        //当前地图模板是影像
      } else if (this.paramsObj.layerId == 'tdt_satellite') {
        this.paramsObj.layerCaId = 'tdt_ciatest' //保存影像注记ID
      } else {
        this.paramsObj.layerCaId = 'tdt_cvatest' //保存矢量注记ID
      }
      this.paramsObj.isTerrName = this.isTerrName
      // this.isTerrName = !this.isTerrName
      this.$emit('changeMapTemplate', this.paramsObj)
    },
  },
}
</script>

<style lang="scss" scoped>
/* **************地图地图切换功能 ******************* */
.BtnBox {
  // width: 100%;
  // height: 100%;
  position: absolute;
  // left: 9.5vw;
  // right: 2vw;
  // bottom: 20px;
  z-index: 11111;
  right: -24px;
  top: 10px;
}

.PortalSitesMap_layerSwitch__dolBg {
  background: #fff;
  padding: 0.5vw;
  pointer-events: none;
  pointer-events: visiblePainted;
  pointer-events: auto;
  position: absolute;
  // left: 9.5vw;
  right: 3vw;
  top: 20px;
  z-index: 11111;
}

.activeClass {
  border: 2px solid #4185d0;
  // box-shadow: 0px 0px 9px 3px #4185d0 outset !important;
}

.PortalSitesMap_layerItem__bIseP {
  padding: 5px;
}

.PortalSitesMap_layer__HgOPW {
  display: flex;
  justify-content: space-around;
  align-content: center;
}

:where(.css-1wismvm).ant-layout,
:where(.css-1wismvm).ant-layout * {
  box-sizing: border-box;
}
</style>
